<template>
  <div>

    <div>
   <van-nav-bar

  left-arrow
  @click-left="onClickLeft"
>
  <template #right>
    <van-icon name="star-o" size="18" />
    <van-icon name="revoke" size="18" />
  </template>
</van-nav-bar>
</div>

<div class="passs">

<div class="propsd-name">

    <div class="sccscs-sp">
    <div class="scsdddd">{{datas.name}}</div>

    <div class="xiagqsyss">
   <van-icon name="location-o" />
   <span>{{datas.city}}</span>
<van-icon name="location-o" />
<span> {{datas.experience}}</span>
<van-icon size="16px" name="location-o" />
<span>{{datas.education}}</span>

    </div>

    <div   class="wangluo">
        <span  v-for="(item, index) in datas.feature" :key="index">{{item}}</span>
    </div>

    </div>
    <div class="bccc">{{datas.salary}}</div>

</div>
<!-- 岗位描述 -->
<div>
    <div class="classsb-name">职位描述</div>
    <div>
        <div v-html= datas.responsibility  ></div>
    </div>
</div>

<div  class="qiyexx-rtwxt">
<div class="imgcs"> 
    <img :src= imgst(datas.company.logo)  alt="">
</div>
<!-- 右边部分 -->

<div>
    <!-- 中间 -->

   <div class="asssasa">
    <div class="bcsca">
        <div class="text-names">
        {{datas.company.name}}
        </div>
        <div class="spans-text">
        <span>{{datas.company.type}}</span>
        <span>{{datas.company.step}}</span>
        <span>{{datas.company.scale}}</span>
        </div>
        </div>
        
 <van-icon name="arrow" />
        </div>
    
   
</div>

</div>


</div>
<van-address-list
 add-button-text="去刷题"
  default-tag-text="默认"
  @add="onAdd"

/>
  </div>
</template>

<script>
import {satelistAPI} from '@/api/company'
export default {
name:'PositionDetails',
data() {
    return {
        // chosenAddressId:'去刷题',
        datas:{}
    }
},
created(){
this.logdata()
},
   methods: {
    //跳转到刷题页面
    onAdd(){
this.$router.push('/test')
    },
    onClickLeft() {
     this.$router.back()
     
    },
 async  logdata(){
    const res = await  satelistAPI(this.$route.params.id)
    console.log(res);
    this.datas=res.data
   }
  },
}
</script>

<style lang="less" scoped>
.passs{
    padding: 0 10px;
    .qiyexx-rtwxt{
        display: flex;
        justify-content: space-between;
        .asssasa{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            .bcsca{
                margin-right: 90px;
                .spans-text{
                    // width: 150px;
                    // padding: 10px;
                    display: flex;
                     span{
                      border: 0.02667rem solid #b4b4bd;
                        font-size: 12px;
                        padding: 0 3px;
                        margin-right: 5px;
                        border-radius: 0.08rem;
                } 
                }
              
                .text-names{
                    font-size: 16px;
                    font-weight: 500;
                }
            }
        }
            .imgcs{
                margin-left:5px ;
            img{
           width: 80px;
            height: 80px; 
            }
         
        }
    }
    .classsb-name{
        font-size: 22px;
        margin: 10px 0;
    
    }
.propsd-name{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .sccscs-sp{
        margin-top: 10px;
            .wangluo{
            // display: flex;
            span{
                font-size: 12px;
                margin-right: 10px;
                 color: #b4b4bd;
            }
            
        }
        .scsdddd{
            font-size: 22px;
            font-weight: 900;
          
        }
        .xiagqsyss{
            margin-top: 5px;
        span{
            margin-right: 5px;
        }
        }
    }
    .bccc{
        color: #e40137;
    }
}
}
</style>